<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width: 200px;height: 30px;}
        .red{background: red}
    </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div class="red box1">hello world</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div id="cont">4</div>
    <div id="cont">5</div>
    <div id="cont">6</div>
    <div class="msg">
        <div class="xbox">
            <h2>标题1</h2>
            <h2>标题2</h2>
        </div>
        <h2>标题3</h2>
        <h2>标题4</h2>
    </div>
    <p>段落1</p>
    <p style="display:none">段落2</p>
    <ul class="list">
        <li>html</li>
        <li> </li>
        <li>css</li>
        <li></li>
        <li class="red">javascript</li>
        <li>php</li>
        <li>mysql</li>
    </ul>
    <ul class="list">
        <li>html</li>
        <li> </li>
        <li>css</li>
        <li></li>
        <li>javascript</li>
        <li>php</li>
        <li>mysql</li>
    </ul>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="password" abc="hahha">
    <input type="text" >
    <input type="text" name>
</body>
<script src="../jquery.js"></script>
<script>
    // $(".box").css("background","red")

    // $("#cont").css("background","red")

    // $("span").css("background","red")
    
    // $(".msg h2").css("background","red")
    
    // $(".msg>h2").css("background","red")

    // $("input[name]").css("background","red")

    // $("input[name=password]").css("background","red")

    // $("input[name=password][abc=hahha]").css("background","red")

    // $(".list li").css("background","red")

    // $(".list li:first").css("background","red")
    // $(".list li:last").css("background","red")
    // $(".list li:eq(2)").css("background","red")

    // $(".list+span").css("background","red")
    // $(".list~span").css("background","red")

    // $(".box,.msg,.list,#cont").css("background","red")

    // $(".list li:not(.red)").css("background","red")

    // $(".list li:even").css("background","red")

    // $(".list li:odd").css("background","red")

    // 更多组合等你来发现...

    // $(".list li:contains(p)").css("background","red")

    // $(".list li:empty").css("background","red")

    // $(".list:has(.red)").css("border","solid 2px black")

    // $("p:hidden").css("background","red")

    // $("p:visible").css("background","red")


    // =================

    // console.log($(".box1").is("#green"))

    // console.log($(".box1").hasClass("red"))

    // $(".box1").removeClass("red")
    // $(".box1").addClass("red")

    // 面向二进制编程
    // 面向指令编程
    // 面向自然语言编程
    //     面向对象编程
    //     面向过程编程

    // $("#btn")[0].onclick = function(){
    //     if($(".box1").is(".red")){
    //         $(".box1").removeClass("red");
    //     }else{
    //         $(".box1").addClass("red");
    //     }
    // }





</script>
</html>